<style lang="stylus" scoped>
  .gtb-layer
    width: 90%;
    border-radius: 1rem;
    box-shadow: 0.3rem 0.4rem 1rem rgba(0,0,0,.8);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    font-size: 0;
    border: .2rem solid #eecf7a;
    background-color: #000;
    box-sizing: border-box;
    margin 60% 0 0 50%;
    transform translate3d(-50%,-50%,0)
    .gtb-layer-top
      position: relative;
      font-size: 0;
      height: 4rem;
    .gtb-layer-content
      min-height: 4rem;
      height: auto;
      color: white;
      padding: 0 1.5rem;
      .gtb-layer-alert
        box-sizing: border-box;
      .txt
        display: flex;
        align-items: center;
        min-height: 4.8rem;
        margin-bottom: 1rem;
        h3
          width: 80%;
          margin: 0 auto;
          text-align: center;
          font-size: 1.4rem;
          color: #fff;
          line-height: 2.4rem;
      .gtb-group
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        .btn
          box-sizing: border-box;
          border-top: .1rem solid rgba(255,255,255,.7);
          position: relative;
          display: inline-block;
          min-width: 8rem;
          height: 2.8rem;
          line-height: 2.7rem;
          background: linear-gradient(to top,#b08b2a,#ffe6a2);
          border-radius: 2.5rem;
          text-align: center;
          text-shadow: 0 0.2rem 0.5rem rgba(0,0,0,.4);
          box-shadow: 0.2rem 0.2rem 0.6rem rgba(0,0,0,.4);
          font-weight: bold;
          font-size: 1.25rem;
          color: #fff;
          width: 100%;
    .gtb-layer-bottom
      height: 1.5rem;
      font-size: 0;
</style>

<template>
  <div class="gtb-layer">
    <div class="gtb-layer-top"></div>
    <div class="gtb-layer-content">
      <div class="gtb-layer-alert">
        <h2></h2>
        <div class="txt">
          <h3>{{txt}}</h3>
        </div>
        <div class="gtb-group">
          <a class="btn" @click="this.$parent.popupbtn">OK</a>
        </div>
      </div>
    </div>
    <div class="gtb-layer-bottom"></div>
  </div>
</template>

<script>
export default {
  props:{
    txt:{
      type:String
    }
  }
};
</script>
